<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	#wrapper{
		margin-left: 70px;
		width: 800px;
		margin-bottom: 270px;
		font-family: nanum;
		margin-top: 100px;
	}
	.product_line { 
		width:705px; height:2px; float:left; background:#d3ccbe;
	}
	#purchaseForm{
		border-top: 2px solid #D2D1D0;
		width: 800px;
	}
	#purchaseForm th{
		height: 20px;
	}
	#purchaseGiftCard{
		width: 800px;
		border-bottom:2px solid #D2D1D0;
	}
	#purchaseGiftCard td{
		text-align: center;
	} 
</style>
<script type="text/javascript">
	
	function maxSizeCheck(){
		var item_num = document.getElementById('item_num').value;
		var quantity = document.getElementById('quantity').value;
		if(quantity > 5 || quantity <1){
			alert('수량은 1~5 사이의 수를 입력해주십시오.');
		}
		location.href='purchase.do?item_num='+item_num+'&&quantity='+quantity;
	}
	function addRow(){
		
		var totalPrice = parseInt(document.getElementById('totalPrice').value, 10);
		
		var table = document.getElementById('purchaseGiftCard');
		var lastRow = table.rows.length;
		var row = table.insertRow(lastRow); 
		lastRow = lastRow -1;
		
		/* row.setAttribute('id', lastRow); */
		
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var cell3 = row.insertCell(2);
		var cell4 = row.insertCell(3);
		var cell5 = row.insertCell(4);
		var cell6 = row.insertCell(5);
		
		var giftCardNum = 0;
		var giftCardPrice = 0;
		var giftCardName = document.getElementById('giftcard_select').value;
		var giftCardQuantity = document.getElementById('quantity_select').value;
		
		if(giftCardName == '아메리카노 10매'){
			giftCardNum = 1000;
			giftCardPrice = 36000;
		} else if(giftCardName == '카페라떼 10매'){
			giftCardNum = 1001;
			giftCardPrice = 45000;
		} else if(giftCardName == '카페모카 10매'){
			giftCardNum = 1002;
			giftCardPrice = 45000;
		} else if(giftCardName == '아이스티 10매'){
			giftCardNum = 1003;
			giftCardPrice = 36000;
		} else if(giftCardName == '레몬에이드 10매'){
			giftCardNum = 1004;
			giftCardPrice = 45000;
		} else if(giftCardName == '리얼초코 10매'){
			giftCardNum = 1005;
			giftCardPrice = 54000;
		} else if(giftCardName == '샌드위치 10매'){
			giftCardNum = 1006;
			giftCardPrice = 54000;
		} else if(giftCardName == '이탈리안 프레첼 10매'){
			giftCardNum = 1007;
			giftCardPrice = 72000;
		} else if(giftCardName == '허니브레드 10매'){
			giftCardNum = 1008;
			giftCardPrice = 54000;
		}
		
		var tempPrice = giftCardQuantity*giftCardPrice;
		totalPrice = (totalPrice + tempPrice);
		
		cell1.align="center";
		cell2.align="center";
		cell3.align="center";
		cell4.align="center";
		cell5.align="center";
		cell6.align="center";
		
		
		//이미지파일, 상품번호
		cell1.innerHTML = "<td width='200px'>"
							+"<img src='images/giftcard/giftcard"+giftCardNum+".png' width='150px'>"
							+"<input type='hidden' name='item_num_"+(lastRow+1)+"' value='"+giftCardNum+"'>"+
						  "</td>";
		//상품명, 가격(상품번호에서 불러옴)
		cell2.innerHTML = "<td width='200px'>"+giftCardName+"</td>";
		cell3.innerHTML = "<td width='100px'>"+giftCardPrice+"</td>";
		//수량
		cell4.innerHTML = "<td width='100px'>"+giftCardQuantity
							 +"<input type='hidden' name='quantity_"+(lastRow+1)+"' value='"+giftCardQuantity+"'>"+
						  "</td>";
		//적립금은 단일 결제 금액의 10% 계산
		cell5.innerHTML = "<td width='100px'>"+(tempPrice*0.1)+"</td>";
		cell6.innerHTML = "<td>"+tempPrice
							 +"<input type='hidden' id='tempPrice"+(lastRow+1)+"' value='"+tempPrice+"'>"+
						  "</td>";
		
		document.getElementById('totalPrice').setAttribute("value", totalPrice);
	}
	
	var deleteCount = 0;
	
	function deleteRow(){
		
		var totalPrice = parseInt(document.getElementById('totalPrice').value, 10);
		var table = document.getElementById("purchaseGiftCard");
		var lastRow = table.rows.length;
		
		if(lastRow>1){
			var tempPrice = parseInt(document.getElementById('tempPrice'+(lastRow-1)).value, 10);
			totalPrice = (totalPrice - tempPrice);
			document.getElementById('totalPrice').setAttribute("value", totalPrice);
			table.deleteRow(lastRow-1);
		} else{
			alert('기존 상품은 삭제할 수 없습니다.');
		}
	}
	
	function success(){
		var table = document.getElementById('purchaseGiftCard');
		var size = table.rows.length;
		document.getElementById('size').value = size;
		document.getElementById('resultPrice').value = document.getElementById('totalPrice').value;
		
		alert(size+"개의 상품권을 선택했습니다!");
		
		var form = document.getElementById("purchaseForm");
		form.submit();
	}
</script>
</head>
<body>
	<div id="wrapper">
		<input type="button" value="상품삭제" style="font-family: nanum;" onclick="deleteRow()"><br><br>
		<table id="purchaseForm">
			<tr>
				<th width="200px">이미지</th>
				<th width="200px">상품명</th>
				<th width="100px">상품가격</th>
				<th width="100px">주문수량</th>
				<th width="100px">적립금</th>
				<th width="100px">결제금액</th>
			</tr>
		</table>
		
		<!-- 이전 페이지에서 선택되어진 정보 -->
		<form  action="purchase.do" method="POST" onsubmit="success();" id="purchaseForm">
		<table id="purchaseGiftCard">
			<tr>
				<!-- 이미지파일 , 상품 번호 -->
				<td width="200px">
					<img src="images/giftcard/giftcard${item_num}.png" width="150px">
					<input type="hidden" id="item_num" name="item_num_0" value="${item_num}">
				</td>
				
				<!-- 상품명 , 할인가격 -->
				<td width="200px">${item_name}</td>
				<td width="100px">${discount_price}</td>
				<!-- 수량 -->
				<td width="100px">${quantity}
					<input type="hidden" name="quantity_0" value="${quantity}">	
				</td>
				<td width="100px">${mileage}</td>
				<td width="100px" id="tempPrice0">${real_price}</td>
			</tr>
		</table>
		<br>
		
		<!-- 추가할 상품  -->
		<div style="margin-left: 30px">
			<span style="font-weight:bold; color:#870200">추가구매</span> &nbsp;
			<select id="giftcard_select">
				<c:forEach var="giftcard" items="${list}">
					<option style="font-family: nanum;" value="${giftcard.item_name}">
						${giftcard.item_name}
					</option>
				</c:forEach>
			</select> &nbsp;
			주문수량 &nbsp;
			<select id="quantity_select">
				<c:forEach var="i" begin="1" end="5">
					<option value="${i}">${i}</option>
				</c:forEach>
			</select>&nbsp;
			
			<input type="button" value="추가" style="font-family: nanum;" 
				   onclick="addRow()">		
		</div>
		<br><br>
		<table style="background:#ADABAB; background:rgba(173,171,171,.2); width: 800px;">
			<tr>
				<td colspan="2" style="font-size: 22pt; font-weight: bold; color:#870200; 
					padding-left: 30px; padding-top: 20px;">
					합계
				</td>
			</tr>
			<tr>
				<td style="padding-left: 30px; padding-top:10px; padding-bottom: 20px;">
					<span style="font-weight: bold;">${email}</span>&nbsp;님의 총 주문 합계금액입니다.
					<input type="hidden" name="email" value="${email}">
				</td>
				<td style="padding-bottom: 11.7px; text-align: right">
					총 결제 예정금액 &nbsp;&nbsp;
					<input type="text" value="${real_price}"
						   style="color:#004000; border:0; background-color:transparent; 
						   font-size: 20pt;" disabled="disabled"  size="5px"
						   id="totalPrice"> 
				</td>
			</tr>
			<tr>	
				<td colspan="2" style="padding-bottom: 20px; text-align: right; padding-right: 45px; border:0">
					<input type="image" src="images/giftcard/btn_select.gif">
				</td>
			</tr>
		</table>
		<br><br>
		<input type="hidden" name="resultPrice" id="resultPrice">
		<input type="hidden" name="size" id="size">
		</form>
		<!-- <p class="product_line"></p> -->
		<br>
	</div>
</body>
</html>